<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true"><block slot="content"><text class="text-darkgrey">砍价记录</text></block></cu-custom>
		<view class="search flex bg-white fixed padding-top-sm solid-bottom">
		    <view class="search-content round">
		        <text class="cuIcon-search padding-right-xs margin-left"></text>
		        <input type="text" placeholder="输入砍价名称搜索" v-model="inputKey" confirm-type="search"></input>
		    </view>
		    <view class="action">
		        <button class="cu-btn bg-blue round search-button margin-right-sm" @click="search">搜索</button>
		    </view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view>
				<view class="cu-list bargain-list">
					<view class="cu-item radius bg-white solid-top padding" v-for="data in dataList" :key="data.id">
						<view class="flex justify-between">
							<view class="padding-bottom-sm">
								<text class="text-darkgrey text-df cuIcon-titles">{{data.shopId}}</text>
							</view>
							<view v-if="data.status==0" class="text-xs cu-tag light round bg-orange">砍价中</view>
							<view v-else-if="data.status==1" class="text-xs cu-tag light round bg-blue">完成砍价</view>
							<view v-else-if="data.status==2" class="text-xs cu-tag light round bg-red">已过期</view>
						</view>
						<view class="cu-list menu-avatar flex justify-between margin-top-xs align-center">
							<view class="cu-avatar head-box" :style="{'background-image':'url('+ (data.userInfo ? data.userInfo.headimgUrl : '')+')'}">
								<text v-if="!data.userInfo" class="cuIcon-peoplefill"></text>
							</view>
							<view class="content flex-sub padding-left text-sm text-darkgrey">
								<view class="text-df text-darkgrey">用户编号：{{data.userInfo ? data.userInfo.userCode:''}}</view>
								<view class="text-purple-grey text-sm">用户昵称：{{data.userInfo ? data.userInfo.nickName : ''}}</view>
								<view class="text-purple-grey text-sm">商品名称：{{data.bargainInfo.goodsSpu.name}}</view>
							</view>
						</view>
						<view class="text-purple-grey text-sm margin-top-xs">砍价信息：{{data.bargainInfo.name}}</view>
						<view class="text-purple-grey text-sm">开始时间：{{data.validBeginTime}}</view>
						<view class="text-purple-grey text-sm">结束时间：{{data.validEndTime}}</view>
						<view class="text-purple-grey text-sm">砍价底价：¥{{data.bargainPrice}}</view>
						<view class="text-purple-grey text-sm">已砍金额：¥{{data.havBargainAmount}}</view>
						<view class="text-purple-grey text-sm">必须底价购买：{{data.floorBuy==0?'否':'是'}}</view>
						<view class="text-purple-grey text-sm">是否购买：{{data.isBuy==0?'否':'是'}}</view>
						<view class="text-purple-grey text-sm ">创建时间：{{data.createTime}}</view>
						<view class="margin-top-xs padding-top-sm flex justify-end">
							<navigator :url="'bargainuser-detail?data='+JSON.stringify(data)" class="cu-btn round  bg-blue button-bg shadow-blur">详情查询</navigator>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	const app = getApp();
	import {
		getPage,
		getObj,
		addObj,
		putObj,
		delObj
	} from '@/api/mall/bargainuser'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {},
		onShow(){
			if(this.mescroll){
				this.mescroll.resetUpScroll(); //刷新
			}
		},
		data() {
			return {
				globalData: app.globalData,
				CustomBar: this.CustomBar,
				inputKey: '',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: { // 下拉刷新的配置(可选, 绝大部分情况无需配置)

				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				dataList: []
			}
		},
		methods: {
			search(val) {
				this.mescroll.resetUpScroll();
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endSuccess()
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let querySearch = '?current=' + pageNum + '&size=' + pageSize + '&descs=create_time';
				if (this.inputKey) {
					querySearch = querySearch + '&name=' + this.inputKey
				}
				getPage(querySearch).then(response => {
					if (response.data) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = response.data.records;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = response.data.total;
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						// 请求成功,隐藏加载状态
						this.mescroll.endBySize(curPageLen, totalSize);
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)

					}
				});
			}
		}
	}
</script>

<style>
	.search{
		width: 100%;
		padding-bottom: 20rpx;
		position: fixed;
		z-index: 1024;
	}

	.search-content{
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
	}

	.search-content input{
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}

	.search-button {
		padding: 10rpx 30rpx 10rpx 30rpx;
	}

	.bargain-list {
		margin-top: 100rpx;
	}

	.head-box {
		width: 200rpx;
		height: 200rpx;
	}
</style>
